import React,{ useEffect, useState } from 'react'
import axios from '../../api/axios';
import { Button, SearchBar, Space, Toast, Card, Tag,NavBar,InfiniteScroll } from 'antd-mobile'
import { IndexBar, List } from 'antd-mobile'
import useLoash from '../../hooks/useLoash';
import { Swiper, Image } from 'react-vant';
import styles from './search.module.css'
import { useNavigate, Outlet } from 'react-router-dom'
import { BellOutline ,HeartFill,CollectMoneyOutline} from 'antd-mobile-icons'
import Mylist from '../../components/Mylist'
function Index() {
     let navigate = useNavigate()
     const [user, setuser] = useState(JSON.parse(localStorage.getItem('userInfo')))
   const [searchlist, setSearchlist] = useState([])
   const [page,setPage]=useState(1)
   const [hislist, setHislist] = useState(JSON.parse(localStorage.getItem('hislist')) || [])
   const [collectList,setcollectList]=useState(JSON.parse(localStorage.getItem('collectList')) ||[])
   const handelsearch =useLoash(async (val) => {
        if (val == '') {
            setSearchlist([])
            return
        }
        const res = await axios.get('/api/list', { params: { wd: val,page } })
        console.log(res);
        const { data } = res.data
        setSearchlist([...searchlist,...data])
        setPage(pre=>pre+1)
        const newlist=[val,...hislist]
        console.log(newlist);
        const ind=newlist.lastIndexOf(val)
        if(ind!==0){
            newlist.splice(ind,1)
        }
        setHislist(newlist)
        localStorage.setItem('hislist',JSON.stringify(newlist))
    },1000) 
    const handeldel=()=>{
         setHislist([])
        localStorage.setItem('hislist',JSON.stringify([]))
    }
    const handelsc=(item)=>{
        const collstate=collectList.some((it)=>it.id===item.id)
        if(collstate){
            const newcollectList=collectList.filter(it=>it.id !==item.id)
            setcollectList(newcollectList)
            localStorage.setItem('collectList',JSON.stringify(newcollectList))
        }else{
            setcollectList([item,...collectList])
             localStorage.setItem('collectList',JSON.stringify([item,...collectList]))
        }
    }
  return (
    <div>
     <NavBar onBack={()=>navigate('/')}>
             <SearchBar placeholder='请输入内容' onChange={(val) => handelsearch(val)} />   
            </NavBar>
            <Card title='历史记录' extra={
                <Button onClick={()=>handeldel()} style={{color:'red'}}>清除记录</Button>
            }>
               {
                hislist.map((it,ind)=>(
                    <Tag key={ind}>{it}</Tag>
                ))
               }
            </Card>
             <div>
                  {
                    searchlist.length>0 && searchlist.map((item,ind)=>(
                        <Mylist item={item} handelsc={handelsc} collectList={collectList} user={user}></Mylist>
                        
                    ))
                }   
                </div>

                <div className={styles.mapitem}
                onClick={()=>navigate('/map')}
                >
                    <span><CollectMoneyOutline />附近</span>

                </div>

    </div>
  )
}

export default Index
